<template>
     <div class="floor">
          <div class="py-container">
               <div class="title clearfix">
                    <h3 class="fl">{{ list.name }}</h3>
                    <div class="fr">
                         <ul class="nav-tabs clearfix">
                              <li :class="index == 0 ? 'active' : ''" v-for="(nav, index) in list.navList" :key="index">
                                   <a href="#tab1" data-toggle="tab">{{ nav.text }}</a>
                              </li>
                         </ul>
                    </div>
               </div>
               <div class="tab-content">
                    <div class="tab-pane">
                         <div class="floor-1">
                              <div class="blockgary">
                                   <ul class="jd-list">
                                        <li v-for="(keyword, index) in list.keywords" :key="index">{{ keyword }}</li>
                                   </ul>
                                   <img :src="require('.' + list.imgUrl)" />
                              </div>
                              <div class="floorBanner">
                                 <!-- 轮播图的地方 -->
                                 <Carousel :list="list.carouselList"/>
                              </div>
                              <div class="split">
                                   <span class="floor-x-line"></span>
                                   <div class="floor-conver-pit">
                                        <img :src="list.recommendList[0]" />
                                   </div>
                                   <div class="floor-conver-pit">
                                        <img :src="list.recommendList[1]" />
                                   </div>
                              </div>
                              <div class="split center">
                                   <img :src="list.bigImg" />
                              </div>
                              <div class="split">
                                   <span class="floor-x-line"></span>
                                   <div class="floor-conver-pit">
                                        <img :src="list.recommendList[2]" />
                                   </div>
                                   <div class="floor-conver-pit">
                                        <img :src="list.recommendList[3]" />
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>

</template>
<script>

export default {
     name: 'Floor',
     // 接收home组件遍历的数据
     props: ['list'],
     data() {
          return {
          }
     },
     methods: {
     },
     mounted() {
          // 第一次书写Swiper时候，在mounte当中书写是不可以的，但是为啥这可以？
          // 第一次书写轮播图的时候，是在当前组件内部发请求、动态渲染的【前提是至少服务器数据需要回来】因此不行
          // 现在请求时父组件发的，父组件通过props传递过来的，而且结构已经有了的情况下执行的mounted

     },
   
}
</script>
<style lang="less" scoped>
.floor {
     margin-top: 15px;
     overflow: hidden;

     .py-container {
          width: 1200px;
          margin: 0 auto;

          .title {
               .fl {
                    float: left;
                    color: #c81623;
                    font-size: 20px;
                    line-height: 30px;
                    margin: 9px 0;
                    font-weight: 700;
               }

               .fr {
                    float: right;

                    .nav-tabs {
                         margin: 10px 0 0;
                         display: inline-block;

                         li {
                              float: left;
                              line-height: 18px;

                              a {
                                   padding-top: 1px;
                                   font-weight: 400;
                                   background-color: #fff;

                                   &::after {
                                        content: "|";
                                        padding: 0 10px;
                                   }
                              }

                              &:nth-child(7) {
                                   a {
                                        &::after {
                                             content: "";
                                        }
                                   }
                              }

                              &.active {
                                   a {
                                        color: #e1251b;
                                   }
                              }
                         }
                    }
               }
          }

          .tab-content {
               border-top: 2px solid #c81623;
               border-bottom: 1px solid #e4e4e4;

               .tab-pane {
                    .floor-1 {
                         height: 360px;
                         display: flex;

                         .blockgary {
                              width: 210px;
                              height: 100%;
                              background: #f7f7f7;

                              .jd-list {
                                   padding: 15px 0;
                                   overflow: hidden;

                                   li {
                                        list-style-type: none;
                                        float: left;
                                        width: 40%;
                                        margin: 0 10px;
                                        border-bottom: 1px solid #e4e4e4;
                                        text-align: center;
                                        line-height: 26px;
                                   }
                              }

                              img {
                                   width: 100%;
                              }
                         }

                         .floorBanner {
                              width: 330px;
                              height: 100%;
                         }

                         .split {
                              width: 220px;
                              height: 100%;
                              position: relative;

                              .floor-x-line {
                                   position: absolute;
                                   background: #e4e4e4;
                                   width: 220px;
                                   height: 1px;
                                   top: 180px;
                              }

                              .floor-conver-pit {
                                   width: 100%;
                                   height: 50%;

                                   img {
                                        width: 100%;
                                        height: 100%;
                                        transition: all 400ms;

                                        &:hover {
                                             opacity: 0.8;
                                        }
                                   }
                              }
                         }

                         .center {
                              border: 1px solid #e4e4e4;
                         }
                    }
               }
          }
     }
}
</style>
